<template>
  <div class="product-detail">
    <s-header :name='"商品详情"' />
    <div>
      <van-swipe>
        <van-swipe-item> 
          <img :src="product.coverImg" style="width: 100%;"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="product-title">
      {{ product.name }}
    </div>
    <div class="product-price">
      <span>&#165;{{ product.price }}</span>
      
    </div>
    <div v-html="product.detailHtml" class="product-content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/cart" :badge="cartCount ? cartCount : 0" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button 
        type="warning"
        text="加入购物车"
        @click="onClickAddCartButton"/>
      <van-goods-action-button 
        type="danger"
        text="立即购买"
        @click="onClickBuyButton" />
    </van-goods-action>
  </div>
</template>

<script>

import { Toast } from 'vant';
import { getProduct } from '@/api/product'
import { addUserCart, checkCart } from '@/api/cart'
import { mapGetters } from 'vuex';
import  sHeader  from '@/components/SHeader';



export default {
  name: 'product',
  data() {
    return {
      productId: this.$route.query.productId ? this.$route.query.productId: null,
      product: {},
    }
  },
  created() {
    this.onLoad()
  },
  components: {
    sHeader,
  },
  computed: {
    ...mapGetters([
      'name',
      'id',
      'cartCount'
    ])
  },
  methods: {
    onLoad(){
      getProduct(this.productId).then(res => {
        if(res.code === 200) {
          this.product = res.data
        }
      })
    },
    async onClickAddCartButton() {
      try {
        const flag = await checkCart({productId: this.product.id,userId: this.id}).then(res => {
          if(res.code === 200 && res.data != 0){
            Toast("该商品已经加入购物车了，请勿重复添加")
            return true;
          }else{
            return false;
          }
        }) 
        if(flag != true){
          addUserCart({
            productId: this.product.id,
            memberId: this.id,
            productName: this.product.name,
            productPrice: this.product.price,
            memberNickname: this.name,
            productQuantity: 1,
            productPic: this.product.coverImg,
            productSubTitle: this.product.subTitle
          }).then(() => {
            this.$store.dispatch('cart/getCart')
            Toast.success('加入购物车成功');
          });
        }
      } catch(err) {
        Toast.fail('加入购物车失败');
      }
      
    },
    onClickBuyButton() {
      // if(this.product.id){
      //   localStorage.removeItem("cartItem");
      //   let cartItem = [];
      //   cartItem.push(this.product.id)
      //   localStorage.setItem("cartItem", cartItem);
      //   this.$router.push({ path: '/create-order'})
      // } else {
      //   Toast("您还没有选择商品哦！")
      // }
      Toast('目前还无法直接购买商品');
    }
  }
}
</script>

<style lang="scss" >
  .product-detail {
    min-height: 100%;

    .product-title {
      margin-top: 5px;
      margin-left: 10px;
      font-size: 18px;
      text-align: left;
      color: #333;
    }
    .product-price {
      color: #f63515;
      font-size: 24px;
      text-align: left;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    .product-content {
      img {
        width: 100%;
        display: block;
        font-size: 0px;
      }
    
    }
  }
  
</style>